<!-- 历史轨迹明细 -->
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
            <el-form-item label="" prop="searchType" style="width: 320px;">
                <el-select v-model="searchType" class="search-text" style="width:90px !important">
                    <el-option label="光伏板编号" :value="0"></el-option>
                    <el-option label="设备号" :value="1"></el-option>
                </el-select>
                <el-select v-model="searchInput" :clearable="true" filterable remote placeholder="请输入"
                    :remote-method="querySearchAsync" :loading="selectLoading" style="width: 214px;">
                    <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="屏蔽速度" prop="speed">
                <el-select v-model="queryParams.speed" placeholder="请选择屏蔽速度" filterable clearable>
                    <el-option v-for="item in speedOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="统计时间" style="width: 308px;">
                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" range-separator="-"
                    start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                    new Date(2000, 2, 1, 23, 59, 59),]"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['statisticalReportForm:historicalTrackDetail:export']">导出</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table highlight-current-row v-loading="loading" :data="tableList">
            <template v-for="v in tableItems">
                <el-table-column :label="v.name" align="left" :prop="v.prop" :width="v.width" />
            </template>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)"
                        v-hasPermi="['statisticalReportForm:historicalTrackDetail:detail']">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />


        <!-- 详情 -->
        <el-dialog :title="title" v-model="open" width="800px" append-to-body class="sky-form">
            <el-form :model="form" label-width="120px" :disabled="true">
                <template v-for="v in  infoItems">
                    <el-form-item :label="v.name" :prop="v.prop">
                        <el-input v-model.trim="form[v.prop]"></el-input>
                    </el-form-item>
                </template>
                <template v-for="v in form.sensorList">
                    <el-form-item :label="'传感器' + v[0]">
                        <el-input v-model.trim="v[1]"></el-input>
                    </el-form-item>
                </template>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts" name="HistoricalTrackDetail">
import dayjs from "dayjs"
import { reactive, toRefs, ref, getCurrentInstance } from "vue"
import request from '../../utils/request'
const open = ref(false);
const title = ref("");

const loading = ref(false);
const selectLoading = ref(false);
const searchType = ref(0);
const searchInput = ref('');
const form: any = ref({});
const tableList = ref([]);
const searchOptions = ref([]);
const dateRange = ref([dayjs(new Date()).format("YYYY-MM-DD 00:00:00"), dayjs(new Date()).format("YYYY-MM-DD 23:59:59")]);
const speedOptions = ref([
    { label: '0', value: '0' },
    { label: '30', value: '30' },
    { label: '50', value: '50' },
    { label: '70', value: '70' },
    { label: '100', value: '100' },
])
const { proxy } = getCurrentInstance();
const tableItems = ref([
    { name: '光伏板编号', prop: "numberPlate",width: 100 },
    { name: '设备号', prop: "dvo",width: 120 },
    { name: '所属公司', prop: "companyName", width: 300 },
    { name: '定位时间', prop: "time", type: "time", width: 160 },
    { name: '当前速度(km/h)', prop: "speed", width: 120 },
    { name: '卫星数', prop: "satelliteCount",width: 100},
    { name: '经度', prop: "lng" },
    { name: '纬度', prop: "lat" },
    { name: '设备高程', prop: "hgt" ,width: 100},
    // { name: '信号强度（100%）', prop: "signalIntensity",width: 160 },
    { name: '当前位置', prop: "location", width: 410 },
]);
const infoItems = ref([
    { name: '所属公司', prop: "companyName" },
    { name: '光伏板编号', prop: "numberPlate" },
    { name: '设备号', prop: "dvo" },
    { name: '定位时间', prop: "time" },
    { name: '当前速度(km/h)', prop: "speed" },
    { name: '卫星数', prop: "satelliteCount" },
    { name: '当前位置', prop: "location" },
    // { name: '短报文内容', prop: "shortMsg" },
    { name: '经度', prop: "lng" },
    { name: '纬度', prop: "lat" },
    { name: '设备高程', prop: "hgt" },
    // { name: '发送方id', prop: "sendId" },
    // { name: '接收方id', prop: "receiveId" },
    // { name: '短报文类型', prop: "shortMsgType" },
    // { name: '信号强度（100%）', prop: "signalIntensity" },
    { name: '定位状态', prop: "locationState" },
]);
const total = ref(0);
const showSearch = ref(true);
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 15,
        speed: null,
    },
});
const { queryParams } = toRefs(data);

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    //@ts-ignore
    proxy.resetForm("queryRef");
    dateRange.value = [dayjs(new Date()).format("YYYY-MM-DD 00:00:00"), dayjs(new Date()).format("YYYY-MM-DD 23:59:59")];
    handleQuery();
}
/** 查询列表 */
function getList() {
    loading.value = true;
    request({
        url: '/comlbs/reportStatistics/trajectory/historyList',
        method: 'post',
        //@ts-ignore
        params: { ...proxy.addDateRange2(queryParams.value, dateRange.value), dvo: searchInput.value }
    }).then(({ data }: any) => {
        tableList.value = data.list;
        total.value = data.total;
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    })
}

/** 导出按钮操作 */
function handleExport() {
    //@ts-ignore
    proxy.download('/comlbs/reportStatistics/trajectory/historyListExport',
        //@ts-ignore 
        { ...proxy.addDateRange2(queryParams.value, dateRange.value), dvo: searchInput.value }
        , `历史轨迹明细${dayjs(new Date()).format("YYYY-MM-DD_HH:mm:ss")}.xlsx`)
}

/** 详情按钮操作 */
function handleDetail(obj: any) {
    form.value = JSON.parse(JSON.stringify(obj));
    open.value = true;
    title.value = "详情";
}

// 远程查询
function querySearchAsync(queryStr) {
    if (queryStr == '' || queryStr.length < 3) {
        searchOptions.value = [];
        return
    }
    selectLoading.value = true;
    if (searchType.value === 0) {
        // 光伏板编号模糊查询
        request({
            url: '/comlbs/vehicleManagement/queryDeviceByPlate',
            method: 'get',
            params: {
                numberPlate: queryStr
            }
        }).then(res => {
            searchOptions.value = res.data.map(v => {
                return {
                    value: v.deviceId,
                    label: v.numberPlate,
                }
            })
            selectLoading.value = false;
        })
    } else if (searchType.value === 1) {
        // 设备号模糊查询
        request({
            url: '/comlbs/equipmentManagement/queryDeviceIdAndNumberPlateByDevice',
            method: 'get',
            params: {
                deviceId: queryStr
            }
        }).then(res => {
            searchOptions.value = res.data.map(v => {
                return {
                    value: v.deviceId,
                    label: v.deviceId,
                }
            })
            selectLoading.value = false
        })
    }
}

// getList();
</script>
<style lang='less' scoped></style>